<template>
	<div class="contains" style="background: #f2f2f2; position: absolute; height: 100%;">
		 <div class="profile-header">
			  <div class="profile-content">
				   <div class="profile-avatar">
					   <image :src="user['avatarUrl']?user['avatarUrl']:''" v-if="user['avatarUrl']" mode=""></image>
				   </div>
				   <div class="profile-text" v-if="is_login">{{user['nickName']}} <span>{{user['type']}}</span></div>
				   <div class="profile-text" v-else ><button type="primary" class="login-form" @click="handleLogin">点击登录</button></div>
			  </div>
		 </div>
		 <div class="profile-body">
			  <div class="profile-order">
				   <div class="profile-order-inner">
					   我的订单
					   <span>查看全部订单</span>
				   </div>
			  </div>
			  <div class="profile-order-item-content">
				   <div class="order-item">
					    <div class="order-item-number">0</div>
					    <div class="order-item-text">全部订单</div>
				   </div>
				   <div class="order-item">
						<div class="order-item-number">0</div>
						<div class="order-item-text">已发货</div>
				   </div>
				   <div class="order-item">
						<div class="order-item-number">0</div>
						<div class="order-item-text">未发货</div>
				   </div>
			  </div>
			  <div class="profile-menu-content">
				   <div class="profile-menu-row">
					    <div class="profilr-menu-icon message"></div>
						<div class="profilr-menu-text">个人信息</div>
				   </div>
				   <div class="profile-menu-row">
						<div class="profilr-menu-icon about"></div>
						<div class="profilr-menu-text">关于我们</div>
				   </div>
			  </div>
		 </div>
		 <div class="profile-body">
			 <div class="profile-menu-content">
				   <div class="profile-menu-row">
						<div class="profilr-menu-icon outlogin"></div>
						<div class="profilr-menu-text">退出登录</div>
				   </div>
			 </div>
		 </div>
	</div>
</template>

<script>
	import {postLogin} from '../../../api/passport.js';
	export default {
	  components:{
	  },
	  data(){
		 return {
			 is_login:false,
			 user:[],
			 typeEnum:{
				 1:'消费者',
				 2:'门店',
				 3:'经销商',
				 4:'工厂'
			 }
		 }
	  },
	  onShow() {
		 this.$Fun.checkLogin((res)=>{
			 this.user = res;
			 this.user['type'] = this.typeEnum[res['type']];
			 this.is_login = true;
		 });
	  },
	  created(){
	  },
	  mounted(){
	  },
	  methods:{
		handleLogin(){
			uni.showLoading({
				title:'登录中',
			})
			var that = this;
			//获取用户信息 （头像和名称）
		    uni.getUserProfile({
		    	desc:"用于登录微信小程序",
				success(res) {
					uni.login({
						success(Lres) {
							var param = {
								code: Lres.code,//login获取code
								encrypted_data: encodeURIComponent(res.encryptedData),//加密信息
								iv:encodeURIComponent(res.iv),
								signature:res.signature,
								avatar_url:res.userInfo.avatarUrl,
								nickname:res.userInfo.nickName
							}
							that.postLogin(param);
						}
					})
				}
		    })
		},
		postLogin(param){
			postLogin(param).then((res)=>{
				if (res.code==200){
					uni.showToast({
						'title':'登录成功'
					})
					var user = {
						'nickName':res.nickName,
						'avatarUrl':res.avatarUrl,
					}
					this.is_login = true;
					this.user = user;
					uni.setStorageSync('token',res.token);
				}
			}) 
		}
	  },
	};
</script>

<style>
	.profile-header { width: 100%; height: 200px; background: #fff; margin-bottom: 20px;}
	.profile-content { width: 200px; height: 100px; margin: 0 auto; padding-top: 40px;}
	.profile-avatar { width: 60px; height: 60px; background: #eee; border-radius: 30px; overflow: hidden; margin: 0 auto;}
	.profile-avatar image { width: 100%; height: 100%;}
	.profile-text { text-align: center;}
	.profile-body { width: 95%; height: auto; margin: 0 auto; border-radius: 10px; background: #fff;}
	.profile-order { height: 40px; border-bottom: 1px solid #f2f2f2;}
	.profile-order-inner { width: 95%; line-height: 40px; margin: 0 auto; color: #666;}
	.profile-order-inner span { float: right; font-size: 12px; color: #ccc;}
	.profile-order-item-content { width: 100%; height: 60px; text-align:center;}
	.order-item { width: 100px; height:35px; padding-top:15px; display:inline-block;}
	.order-item .order-item-number { color:#999; margin-bottom: 5px;}
	.order-item .order-item-text { color:#000;}
	.profile-menu-content { margin-top:20px; background: #fff;}
	.profile-menu-row { height:50px; position: relative;}
	.profilr-menu-text { height: 50px; line-height:50px; padding-left:15%;}
	.profilr-menu-icon { position: absolute; width: 30px; height: 30px; top:10px; left:10px; background:red;}
	.login-form { width: 100px; height: 30px; font-size: 13px; margin-top: 10px; line-height: 30px;}
	.message { background: url(../../assets/images/about.png) no-repeat; background-size:100%;}
	.about { background: url(../../assets/images/message.png) no-repeat; background-size:100%;}
	.outlogin { background: url(../../assets/images/outlogin.png) no-repeat; background-size:100%;}
	.profile-text span { display: inline-block; font-size: 12px; height: 25px; line-height: 25px; border: 1px solid #ff6666; margin-left: 5px; padding: 0 5px; border-radius: 5px;}
</style>